<template>
<div class="login-main">
    <div class="main-img">
        <img :src="mainImg" alt="">
    </div>
        <!-- 登陆表单头 -->
        <div class="view">
            <div class="main">
                <div class="login-title">
                    <p :class="currentIndex==i? 'active':'noactive' " v-for="(item,i) in loginTitle" :key="i" @click="clickLoginWay(i)">{{item.label}}</p>
                </div>

                <!-- form表单  -->
                <div class="login-main-view">
                    <UserLogin v-if="currentIndex==0"></UserLogin>
                    <PhoneLogin v-else></PhoneLogin>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import UserLogin from '@/pages/login/list/UserLogin'
import PhoneLogin from '@/pages/login/list/PhoneLogin'
export default {
    components: {
        UserLogin,PhoneLogin
    },
    name: 'loginMain',
    data() {
        return {
            mainImg: require('@/assets/logo_center.png'),
            currentIndex: 0, //切换条件
            loginTitle: [{
                    label: '账号密码登录',
                    value: '1'
                },
                {
                    label: '手机验证码登录',
                    value: '2'
                }
            ],
             loginData: {
                    userData: {
                        isLoading: false,
                        // data: {
                        //     phoneNum: null,
                        //     password: null,
                        //     isRem: 0
                        // }
                    },
                    phoneData: {
                        isLoading: false,
                        // data: {
                        //     phoneNum: null,
                        //     vcode: null
                        // }
                    }
                }
        }
        
    },
    mounted:{
        
    },
    methods: {
        clickLoginWay(index) {
            this.currentIndex = index
        },
       
    },
}
</script>

<style lang="less" scoped>
.login-main {
    width: 1200px;
    height: 588px;
    margin: 51px auto;
    background: url('../../../assets/login_bg.png') no-repeat;
    position: relative;

    .main-img {
        width: 136px;
        height: 142px;
        position: absolute;
        top: 50%;
        margin-top: -71px;
        margin-left: 222px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    // 登陆表单
    .view {
        width: 490px;
        height: 378px;
        position: absolute;
        right: 90px;
        top: 50%;
        margin-top: -189px;
        box-shadow: 0px 0px 13px 0 #7a7a7a;
        background-color: #fff;

        .login-title {
            width: 100%;
            height: 65px;
            border-bottom: 2px solid #e3e3e3;
            display: flex;
            display: -webkit-flex;
            display: -ms-flex;
            display: -moz-flex;
            align-items: center;

            p {
                flex: 1;
                text-align: center;
                font-size: 20px;
                cursor: pointer;
            }
        }
    }

}

.active {
    color: #333;
}

.noactive {
    color: #999;
}
</style>
